{% extends "base.html" %}

{% block title %}
    {{ article.title }}
{% endblock %}

{% block content %}
    <div class="card shadow-sm">
        <div class="card-body">
            <h5 class="card-title">{{ article.title }}</h5>
            <h6 class="card-subtitle mb-2 text-muted">{{ article.author }}</h6>
            <h6 class="card-subtitle mb-2 text-muted"><a href="/user/{{ article.user.id }}">
                {{ article.user.email[0:(article.user.email|length - article.user.email[article.user.email.index('@'):]|length) // 2] + '***' +
                        article.user.email[article.user.email.index('@'):] }}</a>
            </h6>
            <h6>subject: <a href="/subject/{{ article.subject.id }}">
                {{ parent.name + '/' if parent.id != '1' else '' }}{{ article.subject.name }}</a></h6>
            <p class="card-text">abstract: {{ article.abstract }}</p>
            <p class="card-text">highlight part: {{ article.highlight_part }}</p>
            <a href="/article/{{ article.id }}/pdf">Download PDF</a>
            <span class="text-muted ml-5">{{ article.date }}</span>
            <span class="text-muted ml-5">score: {{ article.score }}</span>
            <div class="float-right">
                <button id="articleUpVote" class="btn btn-light btn-sm">up vote</button>
                {{ article.metric.up_votes }}
                <button id="articleDownVote" class="btn btn-light btn-sm">down vote</button>
                {{ article.metric.down_votes }}
            </div>
        </div>
    </div>

    <div class="card shadow-sm mt-5">
        <div class="card-body">
            <h4>Comments: </h4>
            <hr>
            {% for comment in article.comments %}
                <div class="card shadow-sm mt-2">
                    <div class="card-body">
                        <h6 class="card-subtitle mb-2 text-muted">{{ comment.email[0:(comment.email|length - comment.email[comment.email.index('@'):]|length) // 2] +
                                '***' + comment.email[comment.email.index('@'):] }}:</h6>
                        <p class="card-text">{{ comment.text }}</p>
                        <div class="float-right">
                            <button class="commentUpVote btn btn-light btn-sm" cid="{{ comment.id }}">up</button>
                            {{ comment.up_votes }}
                            <button class="commentDownVote btn btn-light btn-sm" cid="{{ comment.id }}">down</button>
                            {{ comment.down_votes }} <br>
                        </div>
                    </div>
                </div>

            {% endfor %}
        </div>
    </div>

    <div class="card shadow-sm mt-5">
        <div class="card-body">
            <h4>New Comment:</h4>
            <hr>
            <div class="form-group">
                <label for="emailInput">email:</label>
                <input id="emailInput" name="emailInput" type="text" class="form-control">
            </div>
            <div class="form-group">
                <label for="commentText">content: </label>
                <textarea name="commentText" id="commentText" cols="30" rows="10" class="form-control"
                          style="resize: none"></textarea>
            </div>
            <div class="form-group">
                <label for="captcha">captcha: </label>
                <input id="captcha" name="captcha" type="text" placeholder="Click image to change captcha">
                <img id="captchaImg" src="" alt="" width="130px" height="50px">
            </div>
            <button id="submitBtn" class="btn btn-primary float-right">submit</button>
        </div>
    </div>

    <script>
        let img = document.getElementById('captchaImg')
        img.setAttribute('src', '/captcha')
        img.addEventListener('click', function () {
            img.setAttribute('src', '/captcha?' + Math.random())
        })
        let formData = new FormData()
        let submitBtn = document.getElementById('submitBtn')
        submitBtn.addEventListener('click', function () {
            formData.append('email', document.getElementById('emailInput').value)
            formData.append('comment', document.getElementById('commentText').value)
            formData.append('captcha', document.getElementById('captcha').value)
            fetch('/article/{{ article.id }}/comment', {
                method: 'POST',
                body: formData
            }).then(response => response.text()).then(text => {
                alert(text)
                window.location.reload()
            })
        })
        let commentUpVotes = document.getElementsByClassName('commentUpVote')
        let commentDownVotes = document.getElementsByClassName('commentDownVote')
        for (let i = 0; i < commentUpVotes.length; i++) {
            commentUpVotes[i].addEventListener('click', function () {
                let cid = this.getAttribute('cid')
                fetch('/comment/' + cid + '/up_vote', {
                    method: 'POST'
                }).then(response => response.text()).then(text => {
                    alert(text)
                    window.location.reload()
                })
            })
        }
        for (let i = 0; i < commentDownVotes.length; i++) {
            commentDownVotes[i].addEventListener('click', function () {
                let cid = this.getAttribute('cid')
                fetch('/comment/' + cid + '/down_vote', {
                    method: 'POST'
                }).then(response => response.text()).then(text => {
                    alert(text)
                    window.location.reload()
                })
            })
        }
        let articleUpVote = document.getElementById('articleUpVote')
        let articleDownVote = document.getElementById('articleDownVote')
        articleUpVote.addEventListener('click', function () {
            fetch('/article/{{ article.id }}/up_vote', {
                method: 'POST'
            }).then(response => response.text()).then(text => {
                alert(text)
                window.location.reload()
            })
        })
        articleDownVote.addEventListener('click', function () {
            fetch('/article/{{ article.id }}/down_vote', {
                method: 'POST'
            }).then(response => response.text()).then(text => {
                alert(text)
                window.location.reload()
            })
        })
    </script>
{% endblock %}